<template>
  <div class="personalInfo">
    <!-- 头部导航 -->
    <div class="navbar">
      <van-nav-bar
        title="个人信息"
        right-text="保存"
        left-arrow
        @click-right="onClickRight"
      >
        <template #left>
          <van-icon name="arrow-left" @click="$router.push('/my')" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 用户信息 -->
    <div class="userInfo">
      <van-cell-group>
        <!-- 点击头像部分显示 -->
        <input
          type="file"
          hidden
          accept="image/*"
          ref="file"
          @change="onFileChange"
        />
        <van-cell
          title="头像"
          value="内容"
          is-link
          class="photoSize"
          @click="$refs.file.click()"
        >
          <template #default>
            <div class="avatar">
              <img :src="userInfo.photo" alt="" />
            </div>
          </template>
        </van-cell>
        <van-cell
          title="昵称"
          :value="userInfo.name"
          is-link
          @click="nicknameShow = true"
        />
        <van-cell
          title="介绍"
          :value="userInfo.intro"
          is-link
          @click="introShow = true"
        />
        <van-cell
          title="性别"
          :value="columns[userInfo.gender]"
          is-link
          @click="gendershow = true"
        />
        <van-cell
          title="生日"
          :value="userInfo.birthday"
          is-link
          @click="pickTimeShow = true"
        />
      </van-cell-group>
      <!-- 退出组件 -->
      <van-button class="btn" color="#3296fa" plain size="large" @click="edit"
        >退出登录</van-button
      >
    </div>

    <!-- 昵称修改面板 -->
    <van-popup
      v-model="nicknameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!--   :name="userInfo.name"
        @updateName="userInfo.name = $event" -->
      <!-- v-model 的本质 还是父子组件通信，它仅仅是简化了父组件的使用 -->
      <updateName
        v-if="nicknameShow"
        v-model="userInfo.name"
        @close="nicknameShow = false"
      ></updateName>
    </van-popup>

    <!-- 介绍修改面板 -->
    <van-popup
      v-model="introShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <updateIntro
        v-if="introShow"
        v-model="userInfo.intro"
        @close="introShow = false"
      ></updateIntro>
    </van-popup>
    <!-- 性别修改面板 -->
    <van-popup v-model="gendershow" position="bottom">
      <updateGender
        v-model="userInfo.gender"
        @close="gendershow = false"
      ></updateGender>
    </van-popup>

    <!-- 生日选择面板 -->
    <van-popup v-model="pickTimeShow" position="bottom">
      <updateBirthday
        v-if="pickTimeShow"
        v-model="userInfo.birthday"
        @close="pickTimeShow = false"
      ></updateBirthday>
    </van-popup>

    <!-- 修改头像组件 -->
    <van-popup
      class="updatephotoPop"
      v-model="openPickPicShow"
      position="bottom"
      style="height: 100%"
    >
      <updatePhoto
        v-if="aa"
        :file="previewImage"
        @close="openPickPicShow = false"
        @updatephoto="v => (userInfo.photo = v)"
      >
      </updatePhoto>
    </van-popup>
  </div>
</template>

<script>
// 导入 toast
import { Toast } from 'vant'
// 导入请求用户信息方法
import { getUserInfo } from '../../../api/user.js'
// 导入删除 token 的方法
import { removeToken } from '../../../utils/token.js'
// 导入各组件
import updateName from './components/updateName.vue'
import updateGender from './components/updateGender.vue'
import updateBirthday from './components/updateBirthday.vue'
import updateIntro from './components/updateIntro.vue'
import updatePhoto from './components/updatePhoto.vue'

export default {
  data () {
    return {
      baseURL: process.env.VUE_APP_URL, // 基地址
      nicknameShow: false, // 编辑昵称的显示状态
      gendershow: false, // 编辑性别的显示状态
      pickTimeShow: false, // 编辑生日的显示状态
      openPickPicShow: false, // 编辑图片的显示状态
      introShow: false, // 编辑介绍的显示状态
      // openPicker: false, // 点击头像显示选项框
      columns: ['男', '女'],
      userInfo: {}, // 用户信息
      previewImage: null, // 上传预览图片
      aa: true
    }
  },
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updateIntro,
    updatePhoto
  },
  created () {
    this.getInfo()
  },

  methods: {
    // 选择图片
    onFileChange () {
      this.previewImage = null
      //  展示弹出层
      this.openPickPicShow = true
      //  在弹出层里面预览图片
      // const blob = window.URL.createObjectURL(this.$refs.file.files[0])
      const file = this.$refs.file.files[0]
      this.previewImage = file
      // 为了解决相同文件不触发change事件，所以在这里手动清空 file 的value
      this.$refs.file.value = ''
      this.aa = false
      this.$nextTick(() => {
        this.aa = true
      })
    },
    // 退出登录
    edit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否退出登录'
        })
        .then(() => {
          removeToken()
          this.$router.push('/')
        })
        .catch(() => {})
    },
    // 打开选择图片面板
    openPic () {
      this.openPickPicShow = true
    },
    // 获取用户个人信息
    async getInfo () {
      const res = await getUserInfo()
      this.userInfo = res.data.data
    },

    onClickRight () {
      getUserInfo()
      this.$router.push('/my')
      Toast('已保存最新修改')
    }
  }
}
</script>

<style lang="less" scoped>
.personalInfo {
  .updatephotoPop {
    background-color: #000;
  }
  background-color: #f5f7f9;
  // background-color: #ccc;
  .btn {
    margin-top: 20px;
    border: none;
    color: #fff;
    font-weight: 700;
  }

  /deep/.van-popup {
    width: 100%;
    height: 400px;
  }
  height: 100vh;
  .navbar {
    /deep/ .van-nav-bar {
      background-color: #3296fa;
    }
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-nav-bar__text {
      color: #fff;
    }
    /deep/ .van-nav-bar .van-icon {
      color: #fff;
    }
    /deep/ .van-icon {
      font-size: 28px;
    }
  }

  .userInfo {
    /deep/ .van-cell__left-icon,
    .van-cell__right-icon {
      padding-left: 2px;
      font-size: 24px;
      line-height: 50px;
    }
    .avatar {
      display: inline-block;
      width: 50px;
      height: 70px;
      vertical-align: bottom;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .van-cell {
      padding: 0px 20px;
      height: 48px;
      line-height: 48px;
      font-size: 15px;
    }
    .photoSize {
      padding: 6px 30px;
      height: 65px;
    }
    /deep/ .photoSize[data-v-1815b017] {
      padding: 0px 20px;
      height: 1.73333rem;
    }
  }
  .bottomInput {
    margin: 10px;
    padding: 0 5px;
    align-items: center;
    width: 94%;
  }
  .openSelect {
    width: 900%;
  }
  .setStyle {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 200px;
    border-radius: 10px;
    .haveBorder {
      flex: 1;
      width: 10%;
      height: 100%;
      font-size: 18px;
    }
    .aa {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
